<template>
    <div class="login-container bgImg content">
        <div class="layout">
            <div class="header">
                <h2 class="title">养护安全管理系统</h2>
                <p class="sub_title">数字化赋能智慧生产</p>
            </div>
            <a-form-model :model="form" :rules="rules" class="form-container" ref="form">
                <div class="title">欢迎登录</div>
                <a-form-model-item prop="username">
                    <a-input v-model="form.username" placeholder="请输入账号" size="large" allow-clear>
                        <a-icon slot="prefix" type="user" />
                    </a-input>
                </a-form-model-item>
                <a-form-model-item prop="password">
                    <a-input-password
                        v-model="form.password"
                        placeholder="请输入密码"
                        size="large"
                        allow-clear
                        ref="password"
                    >
                        <svg-icon icon="password" :size="14" slot="prefix"> </svg-icon>
                    </a-input-password>
                </a-form-model-item>
                <a-form-model-item class="code_box" prop="code">
                    <div class="code_put">
                        <a-input
                            v-model="form.code"
                            placeholder="请输入验证码"
                            size="large"
                            @pressEnter="toLogin"
                            allow-clear
                        >
                        </a-input>
                    </div>
                    <div class="code_item" @click="getSidentifyCode">
                        <sidentify :identify-code="code"></sidentify>
                    </div>
                </a-form-model-item>

                <a-form-model-item>
                    <a-button type="primary" block size="large" :loading="loading" @click="toLogin"> 登录 </a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>

<script>
import { getCache, setCache, removeCache } from '@/utils/session';
import Sidentify from '@/components/sidentify';
import store from '@/store';

export default {
    name: 'login',
    inject: ['playAudio', 'closeAudio'],
    components: {
        Sidentify
    },
    data() {
        const validateCode = (rule, value, callback) => {
            let code = this.code.toLowerCase();
            if (code != value) {
                callback(new Error('验证码有误，请重新填写'));
            } else {
                callback();
            }
        };
        return {
            form: {
                username: '',
                password: '',
                code: ''
            },
            rules: {
                username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
                password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
                code: [{ required: true, trigger: 'change', validator: validateCode }]
            },
            code: '1234',
            loading: false
        };
    },
    created() {
        this.getSidentifyCode();
    },
    methods: {
        //登录
        toLogin() {
            this.$refs['form'].validate(async valid => {
                if (valid) {
                    let key = 'loginTip';
                    try {
                        this.loading = true;
                        this.playAudio('', 'realtime', false);
                        this.$store.dispatch('setting/changeOpenAudio', true);
                        const { username, password } = this.form;
                        let res = await this.$store.dispatch('user/login', { username, password });
                        if(!res.code){
                            this.$message.success({ content: '登录成功', key, duration: 2 });
                            const { routes } = await store.dispatch('user/getInfo', false);
                            await this.$store.dispatch('permission/getRoute', routes);
                            let path = this.$store.getters.homeRoute;
                            this.$router.push({
                                path: path
                            });
                        }
                    } finally {
                        setTimeout(() => {
                            this.getSidentifyCode();
                            this.loading = false;
                        }, 1000);
                    }
                } else {
                    return false;
                }
            });
        },
        random(max, min) {
            return Math.round(Math.random() * (max - min) + min);
        },
        getSidentifyCode() {
            var str = '1234567890qwertyuioplkjhgfdsazxcvbnm';
            // var str = '1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM';
            var res = '';
            for (var i = 0; i < 4; i++) {
                res += str[this.random(0, 35)];
            }
            this.code = res;
        }
    }
};
</script>
<style lang="scss" scoped>
.code_box {
    ::v-deep .ant-form-item-children {
        display: flex;
    }
    .code_put {
        flex: 1;
        margin-right: 20px;
    }
    .code_item {
        width: 112px;
    }
}
::v-deep .ant-form-item-control {
    line-height: 1 !important;
}
.login-container {
    background-image: url('~@/assets/login/background.jpg');
    .layout {
        position: absolute;
        right: 100px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: row;
        align-items: center;
        .header {
            margin-right: 40px;
            color: #fff;
            text-align: right;
            .title {
                font-size: 60px;
                letter-spacing: 5px;
                color: #fff;
                line-height: 1;
            }
            .sub_title {
                margin-right: 5px;
                font-size: 28px;
            }
        }
        .form-container {
            width: 400px;
            padding: 30px 20px;
            background: #fff;
            border-radius: 5px;
            .title {
                font-weight: 700;
                font-size: 30px;
                letter-spacing: 10px;
                color: #333;
                padding-bottom: 20px;
                text-align: center;
            }
            .forge-password {
                font-size: 12px;
                float: right;
                color: #4165d7;
            }
        }
    }
}
</style>
<style lang="scss">
.login-container {
    .ant-input {
        font-size: 16px !important;
    }
    .ant-tabs-bar {
        border-bottom: none !important;
    }
    .ant-input-affix-wrapper .ant-input:not(:first-child) {
        padding-left: 35px !important;
    }
    .ant-tabs-bar {
        margin-bottom: 30px !important;
    }
}
</style>
